<template>
  <div id="app">
    <el-container style="background-color: #eef2f7; padding: 40px;">
      <!-- 欢迎标题 -->
      <div class="welcome-container">
        <h1 class="welcome-title">欢迎来到迅稳科技</h1>
        <p class="welcome-subtitle">创新技术，稳定服务</p>
      </div>
      <!-- 公司简介 -->
      <el-card class="section-card" shadow="hover">
        <div class="card-content">
          <h2 class="section-title">公司简介</h2>
          <el-divider></el-divider>
          <p class="intro-text">
            <strong>迅稳科技</strong>是一家致力于科技创新的公司，专注于为客户提供高效、稳定的技术解决方案。
            我们的使命是通过智能技术为客户创造更高的价值。
          </p>
        </div>
      </el-card>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style scoped>
#app {
  font-family: 'Arial', sans-serif;
  background-color: #eef2f7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.welcome-container {
  text-align: center;
  margin-bottom: 40px;
}

.welcome-title {
  font-size: 48px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10px;
}

.welcome-subtitle {
  font-size: 20px;
  color: #606266;
  margin-bottom: 20px;
}

.section-card {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  color: #409EFF;
  margin-bottom: 20px;
}

.card-content {
  padding: 10px;
}

.intro-text {
  font-size: 16px;
  line-height: 1.8;
  color: #606266;
  margin-bottom: 16px;
}

el-divider {
  margin: 20px 0;
}
</style>